<template>
  <div>
    <canvas ref="canvas" width="400" height="600"></canvas>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

interface CertificateData {
  amount: string
  balance: string
  distributor: string
  phone: string
  name: string
  bank: string
  cardNumber: string
  registrationTime: string
}

const canvas = ref<HTMLCanvasElement | null>(null)

const drawCertificate = (ctx: CanvasRenderingContext2D, data: CertificateData) => {
  // Clear canvas
  ctx.clearRect(0, 0, 400, 600)

  // Background
  ctx.fillStyle = '#f0f8ff'
  ctx.fillRect(0, 0, 400, 600)

  // Title
  ctx.fillStyle = '#000000'
  ctx.font = 'bold 24px Arial'
  ctx.textAlign = 'center'
  ctx.fillText('提现凭证', 200, 40)

  // White rectangle
  ctx.fillStyle = '#ffffff'
  ctx.fillRect(20, 60, 360, 500)

  // Content
  ctx.fillStyle = '#000000'
  ctx.font = '16px Arial'
  ctx.textAlign = 'left'

  const fields = [
    { label: '提现金额', value: data.amount },
    { label: '账户余额', value: data.balance },
    { label: '分销商昵称', value: data.distributor },
    { label: '手机号', value: data.phone },
    { label: '姓名', value: data.name },
    { label: '开户行', value: data.bank },
    { label: '银行卡号', value: data.cardNumber },
    { label: '注册时间', value: data.registrationTime },
  ]

  fields.forEach((field, index) => {
    ctx.fillText(`${field.label}:`, 40, 100 + index * 50)
    ctx.fillText(field.value, 150, 100 + index * 50)
  })

  // Draw stamp
  ctx.beginPath()
  ctx.arc(300, 500, 50, 0, Math.PI * 2)
  ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'
  ctx.fill()

  ctx.fillStyle = '#ffffff'
  ctx.font = '10px Arial'
  ctx.textAlign = 'center'
  ctx.fillText('本操作已通过', 300, 490)
  ctx.fillText('系统审核', 300, 510)
}

onMounted(() => {
  if (canvas.value) {
    const ctx = canvas.value.getContext('2d')
    if (ctx) {
      const sampleData: CertificateData = {
        amount: '¥900.00',
        balance: '¥6789.45',
        distributor: '默认昵称',
        phone: '14578683468',
        name: '张亮亮',
        bank: '中国银行',
        cardNumber: '734456456465456564566',
        registrationTime: '2024-03-23 12:34:34',
      }
      drawCertificate(ctx, sampleData)
    }
  }
})
</script>